// 配置管理表格
<template>
  <div class="foimmwewerr">
    <div class="display-flex dfsdfdsfsde">
      <div class="sdcfsdfrtrttr display-flex">
        <div v-for="(item, idx) in search" :key="idx" class="mr10 mb10">
          <div v-if="item.type == 'date'" class="kkjmmserer">
            <n-date-picker
              v-model:value="parameters[item.key]"
              type="date"
              :placeholder="'请选择' + item.title"
              clearable
            />
          </div>
          <div
            v-else-if="item.type == 'daterange'"
            class="kkjmmserer"
            style="width: 250px"
          >
            <n-date-picker
              :start-placeholder="item.title"
              v-model:value="parameters[item.key]"
              type="daterange"
              clearable
              :update-value-on-close="true"
            />
          </div>

          <div v-else-if="item.type == 'select'" class="kkjmmserer">
            <n-select
              v-model:value="parameters[item.key]"
              :options="item.options"
              :placeholder="'请选择' + item.title"
              @change="item.callBack"
              :disabled="item.disabled || (item.bjzj && redact)"
              filterable
            />
          </div>

          <div v-else-if="item.type == 'city'" class="kkjmmserer">
            <n-tree-select
              class="kksdfsdtr"
              v-model:value="parameters[item.key]"
              multiple
              checkable
              :options="item.options"
              :cascade="false"
              key-field="value"
              :allow-checking-not-loaded="false"
              :on-load="handleLoad"
            />
          </div>

          <div v-else class="kkmmeweerr">
            <n-input
              v-model:value="parameters[item.key]"
              :allow-input="noSideSpace"
              :placeholder="item.placeholder || '请输入' + item.title"
              size="medium"
              clearable
              @input="jjnmxert(item.key)"
            />
          </div>
        </div>
      </div>

      <div class="jkkjnnjwert">
        <n-button
          type="info"
          size="medium"
          class="chaxunbtn"
          v-if="search.length > 0"
          @click="initData(2)"
          >查询</n-button
        >
        <n-button
          type="info"
          size="medium"
          class="chaxunbtn ml10"
          v-if="search.length > 0"
          @click="czbdfun"
          >重置</n-button
        >
        <n-button
          type="info"
          size="medium"
          class="ml10"
          @click="initForm"
          v-if="isshowXz"
          v-permission="qx.NewPermissionIdentifier"
          >新增</n-button
        >

        <div class="f_i ml10" v-if="showdr">
          <n-upload @before-upload="uploadxl" accept=".xls, .xlsx">
            <n-button type="info">导入</n-button>
          </n-upload>
        </div>
        <div class="f_i ml10" v-if="showofg">
          <addInvoice @callbaclk="initData" :pitchOn="pitchOn"></addInvoice>
        </div>

        <n-button
          :type="item.type || 'info'"
          size="medium"
          class="ml10"
          :loading="item.loading"
          v-for="(item, idx) in headBtnw"
          :key="idx"
          :disabled="
            (pitchOn.length > 0 ? false : true) && (item.jy ? false : true)
          "
          @click="item.clickFun(pitchOn, pitchOnobj)"
          >{{ item.name }}</n-button
        >
        <n-button
          type="error"
          size="medium"
          class="ml10 dsfsdfsrt"
          @click="topDel"
          :disabled="pitchOn.length > 0 ? false : true"
          v-if="isshowSc"
          v-permission="qx.DeletePermissionID"
          >删除</n-button
        >
      </div>
    </div>

    <n-spin :show="show">
      <n-data-table
        v-if="jhberr"
        size="small"
        class="mt10"
        :row-key="(row) => row.id"
        :max-height="screenH - 270"
        :pagination="isBfy ? false : paginationReactive"
        :columns="columns"
        :data="tableData"
        :single-line="false"
        :remote="!isBfy"
        :scroll-x="fixed ? 2120 : ''"
        @update:page="handlePageChange"
        @update:checked-row-keys="handleCheck"
        :default-checked-row-keys="checkedRowKeyser"
        :loading="loading"
        @update:sorter="handleSorterChange"
        :summary="props.summary"
      >
        <template #empty>
          <div class="cen">
            <img src="../../assets/img/noData.png" class="noData-png cz" />
            <p class="fz12 z9 mt10">暂无数据！</p>
          </div>
        </template>
      </n-data-table>

      <n-button
        v-if="jhberr"
        type="error"
        size="medium"
        class="ml10 dfdtytwwet"
        @click="topDel"
        :disabled="pitchOn.length > 0 ? false : true"
        v-permission="qx.DeletePermissionID"
        >删除</n-button
      >
    </n-spin>

    <n-modal
      v-model:show="showModal"
      preset="card"
      class="Stock-diagnosis"
      :mask-closable="false"
      @after-leave="closerrt"
    >
      <template #header>
        <div v-if="bjtext == '详情'">详情</div>
        <div v-else>{{ redact ? "编辑" : "添加" }}</div>
      </template>
      <div class="pl10">
        <n-form
          ref="formRef"
          :model="model"
          :rules="rules"
          label-placement="left"
          label-width="120px"
          require-mark-placement="right-hanging"
          size="medium"
          :style="{}"
        >
          <n-grid :cols="24" :x-gap="20">
            <template v-for="(item, idx) in formJsonzj" :key="idx">
              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                :path="item.key"
                v-if="item.type == 'label'"
              >
                <div class="display-flex">
                  <div class="flex-1 vertical-center tl">
                    <p class="mt5">
                      {{ model[item.key] }}
                    </p>
                  </div>
                </div>
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                :path="item.key"
                v-if="
                  (item.type == 'input' || item.type == 'password') &&
                  !item.hide
                "
              >
                <div class="display-flex">
                  <div class="flex-1">
                    <n-input
                      :placeholder="'请输入' + item.title"
                      :input-props="{ autocomplete: 'new-password' }"
                      :type="item.type"
                      :disabled="item.disabled || (item.bjzj && redact)"
                      v-model:value="model[item.key]"
                      @change="item.callBack(model[item.key])"
                    />
                  </div>
                  <span class="ml5 vertical-center z9 fz12" v-if="item.dw">{{
                    item.dw
                  }}</span>
                </div>
              </n-form-item-gi>
              <n-form-item-gi
                :span="24"
                :label="item.title"
                :path="item.key"
                v-if="item.type == 'textarea' && !item.hide"
              >
                <n-input
                  :placeholder="'请输入' + item.title"
                  type="textarea"
                  v-model:value="model[item.key]"
                  rows="5"
                />
              </n-form-item-gi>
              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                :path="item.key"
                v-if="item.type == 'img'"
              >
                <div
                  class="headPortrait-box vertical-center sz"
                  @click="
                    photoShowModal = true;
                    typesse = item.oijert;
                    itemType = item.type;
                    imgKey = [item.key];
                  "
                >
                  <!-- <div
                    v-if="model[item.key].indexOf('.mp4') >= 0"
                    class="w100 h100"
                  >
                    <video
                      :src="model[item.key]"
                      muted="muted"
                      autoplay="autoplay"
                      loop="loop"
                      webkitplaysinline="true"
                      class="w100 h100"
                    ></video>
                  </div> -->
                  <div >
                    <img :src="model[item.key]" v-if="model[item.key]" />

                    <i class="iconfont dx-tupian fz30" v-else> </i>
                  </div>
                </div>
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                :path="item.key"
                v-if="item.type == 'pdf'"
              >
                <!-- v-if="model[item.key]" -->

                <div class="headPortrait-box vertical-center sz">
                  <n-upload
                    :action="prefixS + 'public/Upimg'"
                    :data="upload"
                    accept=".pdf"
                    @Finish="getImgs($event, item.key)"
                    @before-upload="appload = true"
                  >
                    <n-spin :show="appload" class="w100 h100">
                      <div class="w100 h100 vertical-center">
                        <img
                          src="../../assets/img/pdf.png"
                          class="dsfsdrtryr cz"
                          v-if="model[item.key]"
                        />
                        <i class="iconfont dx-add1 fz30" v-else></i>
                      </div>
                    </n-spin>
                  </n-upload>
                </div>
                <div class="mt5" v-if="model[item.key]">
                  <a
                    :href="model[item.key]"
                    black
                    target="_blank"
                    class="ls mt10"
                  >
                    点击查看
                  </a>
                </div>
              </n-form-item-gi>

              <!-- 图片列表注意val必须为数组 -->
              <n-form-item-gi
                :span="24"
                :label="item.title"
                :path="item.key"
                v-if="item.type == 'imglist'"
              >
                <div class="kjjjmsertwe">
                  <template v-for="(imgi, idx) in model[item.key]" :key="idx">
                    <div class="kjjjsertwwx" v-if="imgi">
                      <div v-if="imgi.indexOf('.mp4') >= 0" class="w100 h100">
                        <video
                          :src="imgi"
                          muted="muted"
                          autoplay="autoplay"
                          loop="loop"
                          webkitplaysinline="true"
                          class="w100 h100"
                        ></video>
                      </div>
                      <img :src="imgi" v-else />
                      <i
                        class="iconfont dx-closefill sfdgdgty fz30"
                        @click="closesert(idx, item.key)"
                      ></i>
                      <div class="jjnxeertrtw vertical-center">
                        <p>
                          <i
                            class="iconfont dx-left cf fz32 b"
                            @click="kjnmse(idx, 1, item.key)"
                          >
                          </i>
                          <i
                            class="iconfont dx-right cf fz30 ml10"
                            @click="kjnmse(idx, 2, item.key)"
                          >
                          </i>
                        </p>
                      </div>
                    </div>
                  </template>

                  <div
                    class="headPortrait-box vertical-center sz"
                    @click="
                      photoShowModal = true;
                      itemType = item.type;
                      imgKey = [item.key];
                    "
                  >
                    <i class="iconfont dx-tupian fz30"> </i>
                  </div>
                </div>
              </n-form-item-gi>

              <n-form-item-gi
                :span="24"
                :label="item.title"
                :path="item.key"
                v-if="item.type == 'video'"
              >
                <div class="display-flex">
                  <div class="flex-1">
                    <n-input
                      placeholder="请选择/填写视频地址"
                      v-model:value="model[item.key]"
                    />
                  </div>
                  <div class="ml10">
                    <n-button
                      type="primary"
                      size="medium"
                      @click="
                        photoShowModalvideo = true;
                        imgKey = [item.key];
                        xzval = model[item.key];
                        dqitem = item;
                      "
                      >选择视频</n-button
                    >
                  </div>
                </div>
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                :path="item.key"
                v-if="item.type == 'videocover'"
              >
                <div
                  class="headPortrait-box vertical-center sz"
                  @click="
                    photoShowModalvideo = true;
                    imgKey = [item.key];
                    xzval = model[item.key];
                    dqitem = item;
                  "
                >
                  <div
                    v-if="model[item.key].indexOf('.mp4') >= 0"
                    class="w100 h100"
                  >
                    <video
                      :src="model[item.key]"
                      muted="muted"
                      autoplay="autoplay"
                      loop="loop"
                      webkitplaysinline="true"
                      class="w100 h100"
                    ></video>
                  </div>
                  <div v-else>
                    <i class="iconfont dx-tupian fz30"> </i>
                  </div>
                </div>
              </n-form-item-gi>




              
              <!-- 图片列表注意val必须为数组 getVideoName-->
              <n-form-item-gi
                :span="24"
                :label="item.title"
                :path="item.key"
                v-if="item.type == 'videoList'"
              >
                <div class="kjjjmsertwe">
                  <template v-for="(imgi, idx) in model[item.key]" :key="idx">
                   <div v-if="imgi">
                    <div class="kjjjsertwwx" >
                      <div  class="w100 h100">
                        <video
                          :src="imgi"
                          muted="muted"
                          autoplay="autoplay"
                          loop="loop"
                          webkitplaysinline="true"
                          class="w100 h100"
                        ></video>
                      </div>
                  
                      <i
                        class="iconfont dx-closefill sfdgdgty fz30"
                        @click="closesert(idx, item.key)"
                      ></i>
                      <div class="jjnxeertrtw vertical-center">
                        <p>
                          <i
                            class="iconfont dx-left cf fz32 b"
                            @click="kjnmse(idx, 1, item.key)"
                          >
                          </i>
                          <i
                            class="iconfont dx-right cf fz30 ml10"
                            @click="kjnmse(idx, 2, item.key)"
                          >
                          </i>
                        </p>
                      </div>
                    </div>
                    <p class="cen">{{ getVideoName(imgi) }}</p>
                   </div>
                  </template>

                  <div
                    class="headPortrait-box vertical-center sz"
                    @click="
                      photoShowModalvideo = true;
                      itemType = item.type;
                      imgKey = [item.key];
                    "
                  >
                    <i class="iconfont dx-tupian fz30"> </i>
                  </div>
                </div>
              </n-form-item-gi>



              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'select' && !item.ishide"
                :path="item.key"
              >
                <n-select
                  v-model:value="model[item.key]"
                  :options="item.options"
                  @change="jmmxxcfe(item, $event, model)"
                  :multiple="item.multiple"
                  :disabled="(redact && item.xzshow) || (item.bjzj && redact)"
                  filterable
                />
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'checkbox'"
              >
                <n-checkbox-group v-model:value="model[item.key]">
                  <n-space
                    item-style="display: flex;"
                    style="position: relative; top: 6px"
                  >
                    <n-checkbox
                      v-for="sd in item.options"
                      :value="sd.value"
                      :label="sd.label"
                    />
                  </n-space>
                </n-checkbox-group>
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'date'"
              >
                <!-- val要格式化处理一下    
                   {
    title: "活动时间",
    key: "actTime",
    type: "date",
    val:transferTimeYMD(new Date().getTime()) 
  },
  
                  
                  transferTimeYMD(new Date().getTime())  -->
                <n-date-picker
                  v-model:formatted-value="model[item.key]"
                  type="date"
                  clearable
                  value-format="yyyy-MM-dd"
                />
              </n-form-item-gi>
              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'datetime'"
              >
                <n-date-picker
                  v-model:value="model[item.key]"
                  type="datetime"
                  clearable
                />
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'time'"
              >
                <n-time-picker v-model:value="model[item.key]" format="HH:mm" />
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'daterange'"
              >
                <n-date-picker
                  v-model:value="model[item.key]"
                  update-value-on-close
                  type="daterange"
                  :actions="null"
                />
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'color'"
              >
                <n-color-picker
                  v-model:value="model[item.key]"
                  :show-alpha="false"
                />
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'number'"
              >
                <div class="display-flex">
                  <div class="flex-1">
                    <n-input-number
                      v-model:value="model[item.key]"
                      :placeholder="'请输入' + item.title"
                      size="medium"
                      :disabled="item.disabled || (item.bjzj && redact)"
                      @input="item.callBack(model[item.key], model)"
                      :show-button="false"
                    />
                  </div>
                  <span class="ml5 vertical-center z9 fz12" v-if="item.dw">{{
                    item.dw
                  }}</span>
                </div>
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'dizhi'"
              >
                <n-select
                  v-model:value="model[item.key]"
                  filterable
                  placeholder="请输入组局地址"
                  :options="mapList"
                  :loading="dizhiload"
                  clearable
                  remote
                  :clear-filter-after-select="false"
                  @search="handleSearch"
                  @change="slksrxe(item, $event)"
                />
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'radio'"
              >
                <n-radio-group
                  v-model:value="model[item.key]"
                  name="radiogroup"
                  class="jjhnxetrwre"
                  :disabled="item.disabled || (item.bjzj && redact)"
                  @change="item.callBack(model[item.key])"
                >
                  <n-space>
                    <n-radio
                      v-for="song in item.opt"
                      :key="song.value"
                      :value="song.value"
                    >
                      {{ song.label }}
                    </n-radio>
                  </n-space>
                </n-radio-group>
              </n-form-item-gi>
              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'Tags'"
              >
                <n-dynamic-tags v-model:value="model[item.key]" />
              </n-form-item-gi>
              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title + ':'"
                v-if="item.type == 'text'"
              >
                <span style="margin-top: 6px"> {{ model[item.key] }}</span>
              </n-form-item-gi>
              <n-form-item-gi
                :span="24"
                :label="item.title"
                v-if="item.type == 'address'"
              >
                <div class="display-flex">
                  <div class="flex-1 mr5">
                    <n-select
                      v-model:value="model['district']"
                      placeholder="请选择区域"
                      :options="districtceList"
                      @change="districtChange"
                    />
                  </div>
                  <div class="flex-1 ml5">
                    <n-select
                      v-model:value="model['street']"
                      placeholder="请选择街道"
                      :options="streetList"
                    />
                  </div>
                </div>
                <div class="mt10">
                  <n-input
                    placeholder="请输入详细地址"
                    type="input"
                    v-model:value="model['detailedAddress']"
                  />
                </div>
              </n-form-item-gi>

              <n-form-item-gi
                :span="24"
                :label="item.title"
                v-if="item.type == 'shengshi'"
              >
                <div class="display-flex">
                  <div class="flex-1 mr5">
                    <n-select
                      filterable
                      v-model:value="model['sheng']"
                      placeholder="请选择省份"
                      :options="shenList"
                      value-field="label"
                      @change="changegetssqAddress"
                    />
                  </div>
                  <div class="flex-1 ml5">
                    <n-select
                      filterable
                      v-model:value="model['shi']"
                      placeholder="请选择城市"
                      :options="shiList"
                      value-field="label"
                    />
                  </div>
                </div>
              </n-form-item-gi>

              <n-form-item-gi
                :span="item.span || 24"
                :label="item.title"
                v-if="item.type == 'fwb'"
              >
                <div class="fxfgfretxcrw">
                  <div v-html="model[item.key]"></div>
                </div>
                <p class="ls mt5 sz" @click="sertrs(item)">
                  <i class="iconfont dx-wenbenbianji"></i> 点击编辑{{
                    item.title
                  }}
                </p>
              </n-form-item-gi>
              <n-form-item-gi
                :span="item.span || 12"
                :label="item.title"
                v-if="item.type == 'mapdz'"
              >
                <p class="z3 fz16 mt5" v-if="model[item.key]">
                  {{ model[item.key] }}
                </p>
                <p class="ls mt5 sz" @click="xzdzsdr(item)">
                  <i class="iconfont dx-map1"></i> 点击选择{{ item.title }}
                </p>
              </n-form-item-gi>
            </template>
          </n-grid>
        </n-form>
      </div>
      <template #action>
        <div class="display-flex">
          <div class="flex-1">
            <div v-if="!model.id && ispiliang" class="ml10 display-flex">
              <div style="width: 200px">
                <n-input-number
                  :min="1"
                  v-model:value="kmmxsr"
                  type="text"
                  placeholder=""
                  size="medium"
                  clearable
                  @change=""
                ></n-input-number>
              </div>
              <n-button class="ml10" type="info" @click="kxczxtrtywe">
                批量生成
              </n-button>
            </div>
          </div>
          <div>
            <n-button @click="showModal = false"> 取消 </n-button>
            <n-button
              class="ml10"
              type="info"
              @click="addConfirm"
              :loading="formLoad"
            >
              确定
            </n-button>
          </div>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModal"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>{{ props.imgkuTitle || "图片库" }}</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImg"
          :types="props.imgkuTitle + Userid"
          :accept="props.accept"
          :xzval="xzval"
        >
        </photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModal = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImg"> 确定 </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal
      v-model:show="photoShowModalvideo"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>视频库</div>
      </template>
      <div>
        <photoGallery
          @getImg="getImgvideo"
          :types="'视频库' + Userid"
          accept=".mp4,.m4v"
          :xzval="xzval"
        >
        </photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModalvideo = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="setImgvideo">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal v-model:show="kxscert" preset="card" class="kzxcxdffrtret">
      <template #header>
        <div>编辑内容</div>
      </template>
      <div class="w100 h100">
        <tinymce ref="kjmxxd" :htmlNr="htmlNr"></tinymce>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="kxscert = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="cvxvxrcvgrt">
            确定
          </n-button>
        </div>
      </template>
    </n-modal>

    <n-modal v-model:show="ismaps" preset="card" class="kzxcxdffrtret">
      <template #header>
        <div>选择地址</div>
      </template>
      <div class="w100 h100">
        <dxmap @close="ismaps = false" @success="successmap"></dxmap>
      </div>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
import { h, ref, reactive, toRef } from "vue";
import {
  dxget,
  dxdel,
  dialog,
  dxpost,
  hf,
  yzphone,
  kscpbm,
  readExcel,
  qurl,
  prefixS,
} from "../../util/index";
import { quyu } from "../../util/beRelieved/quyu";
import photoGallery from "./photoGallery";
import { NDynamicTags, NImage, NTag, NButton } from "naive-ui";
import store from "../../store";
import tableMore from "./tableMore.vue";
import tinymce from "./tinymce.vue";
import dxmap from "./dxmap.vue";
import addInvoice from "../../view/fapiao/addInvoice.vue";
import { isArray } from "lodash";
const Userid = localStorage.Userid;
const shenList = ref([]);
const shiList = ref([]);
const mapList = ref([]);
const loading = ref(false);
const dizhiload = ref(false);
const photoShowModalvideo = ref(false);
const xkfdsfsdty = ref();
const formLoad = ref(false);
const kxscert = ref(false);
const cz = qurl();
const xzval = ref();
const videoDq = ref();
const kjmxxd = ref();
const dqitem = ref();
const htmlNr = ref();
const appload = ref(false);
const kmmxsr = ref(5);
let props = defineProps({
  qx: { type: Object },
  extra: { type: Object }, //额外的参数
  isshowXz: { type: Boolean, default: true }, //是否显示新增按钮
  isshowSc: { type: Boolean, default: true }, //是否显示删除按钮
  summary:{ type: Object },
  dataJson: { type: Array },
  portUrl: { type: String },
  sonRouter: { type: String },
  imgkuTitle: { type: String },
  pageSize: { type: Number },

  types: { type: Number },
  isBfy: { type: Boolean, default: false },
  hidebj: { type: Boolean, default: false },
  showdr: { type: Boolean, default: false },
  showofg: { type: Boolean, default: false },
  ispiliang: { type: Boolean, default: false },
  drerrtext: { type: String },
  sjname: { type: String },
  ewcsobj: { type: Object }, //额外的参数
  formJson: {
    type: Array,
    default: {
      title: "",
    },
  },
  czFun: {
    type: Object,
    default: {
      fun: () => {},
    },
  },
  headBtn: {
    type: Array,
    default: null,
  },
  headerFrom: {
    type: Array,
    default: null,
  },
  fixed: {
    type: String,
  },
  MoreOperations: {
    type: Boolean,
    bz: "是否暂时更多操作",
  },
  accept: {
    type: String,
    default: ".jpg,.png,,.jpeg",
  },
  checkedRowKeys: {
    type: Array,
    default: null,
  },
  czWidth: {
    type: String,
    default: null,
  },
  bjtext: {
    type: String,
    default: null,
  },
  addurl: {
    //弹窗的添加接口
    type: String,
    default: null,
  },
  delurl: {
    type: String,
    default: null,
  },
});
const upload = {
  typeName: "pdf",
};
const pitchOnobj = ref([]);
const pmw = window.screen.width;
const typesse = ref();
const itemType = ref();
const screenH = ref(store.state.windHeight);
if (store.state.windHeight < 800) {
  screenH.value = 600;
}
const emit = defineEmits([
  "addFromback",
  "initDataCall",
  "delfun",
  "getlistId",
  "bjfun",
  "handleSorterChange",
]);
let formJson = toRef(props, "formJson");
const formRef = ref(null);
const headBtnw = ref();
headBtnw.value = props.headBtn;
const search = ref([]);
const searchObj = {};
const show = ref(false);
const zdcolumns = [];
const tableData = ref([]);
const photoShowModal = ref(false);
const imgVal = ref();
const videoVal = ref();
const videoValCover = ref();
const redact = ref(false); // 是否为编辑状态
const showModal = ref(false);
const imgKey = ref();
const pitchOn = ref([]);
const districtList = ref();
const cityList = ref();
const districtceList = ref();
const streetList = ref();
const checkedKeys = ref();
const checkedRowKeyser = ref();
const jhberr = ref(null);
const kkmfdftre = ref();
const ismaps = ref();
const qssd = ref();
setTimeout(() => {
  checkedRowKeyser.value = props.checkedRowKeys;
  jhberr.value = true;
}, 50);
let rules = {};
let modelKeys = {};
let formJsonzj = ref([]);
formJsonzj.value = props.formJson;
try {
  props.formJson.map((a: any) => {
    if (a.required) {
      const ojhhs = {
        required: true,
        trigger: ["blur", "input"],
        message: "请输入" + a.title,
        validator: null,
      };

      if (a.yzlx == "phone") {
        ojhhs.validator = (rule: any, a: any) => {
          if (!yzphone(a)) {
            rule.message = "请输入正确的手机号码";

            return new Error("请输入正确的手机号码" + a);
          }
          return true;
        };
      }
      rules[a.key] = ojhhs;
    }
    if (a.type == "address") {
      a.key.split(",").map((ba) => {
        modelKeys[ba] = null;
      });
      return;
    }

    if (a.val) {
      modelKeys[a.key] = a.val;
    } else {
      modelKeys[a.key] = "";
    }
    if (a.type == "imglist") {
      modelKeys[a.key] = [];
    }
  });
} catch (e) {}
const closerrt = () => {
  console.log("窗口关闭事件");
};
const model = ref({
  id: "",
  street: "",
  ...modelKeys,
});

const handleSorterChange = (data) => {
  emit("handleSorterChange", { parameters, data });
};

const jmmxxcfe = (item, $event, model) => {
  try {
    const daayse = item.options.filter((a) => a.value == $event)[0];
    item.callBack(daayse, model);
  } catch (e) {}
};
const sertrs = (item) => {
  htmlNr.value = "" + model.value[item.key];
  kxscert.value = true;
  imgKey.value = [item.key];
  qssd.value = item;
};
const xzdzsdr = (item) => {
  ismaps.value = true;
  qssd.value = item;
};
const successmap = (data) => {
  ismaps.value = false;
  model.value[qssd.value.key] = data.dikjxzx;
  model.value[qssd.value.keyjw] = data.zb;
};
const cvxvxrcvgrt = () => {
  const jkmxsv = kjmxxd.value.getContent();
  model.value[imgKey.value] = jkmxsv;
  kxscert.value = false;
  console.log(qssd.value);
  qssd.value.callBack(kjmxxd.value.gettext().trim().slice(0, 100));
};

props.dataJson.map((a: any) => {
  /**
   * 为真的话查询栏展示
   */
  if (a.search) {
    search.value.push(a);
  }
  if (a.type == "img") {
    a.render = (row) => {
      return h(NImage, { src: row[a.key], class: "dsfsdrtrtrt imgjz" });
    };
  }
  if (a.type == "imglist") {
    a.render = (row) => {
      try {
        let jnmxcx = [];
        if (row[a.key].split(",")) {
          row[a.key] = row[a.key].split(",");
          console.log(row[a.key]);
          row[a.key].map((a) => {
            jnmxcx.push(h(NImage, { src: a, class: "dsfsdrtrtrt imgjz mr10" }));
          });
          return jnmxcx;
        }
      } catch (e) {}
    };
  }
  a.align = "center";
  if (!a.hidetable) {
    zdcolumns.push(a);
  }
});
try {
  props.headerFrom.map((a) => {
    search.value.push(a);
  });
} catch (e) {}

search.value.map((a) => {
  searchObj[a.key] = a.value || null;
});

let parameters = reactive({
  ...searchObj,
  page: 1,
  addTime: "",
  street: "",
});

const paginationReactive = reactive({
  page: 1,
  // showQuickJumper: true,
  pageCount: 1,
  showSizePicker: true,
  pageSize: props.pageSize,
  pageSizes: [10, 30, 50, 80],
  onUpdatePageSize: (pageSize) => {
    paginationReactive.pageSize = pageSize;
    paginationReactive.page = 1;
    initData();
  },
});
const  getVideoName=(url)=> {
  try{
    // 分割URL获取文件名
  const fileName = url.split('/').pop();
  // 以固定字符“175”分割，取前半部分即为视频名称
  const videoName = fileName.split('175')[0];
  return videoName;
  }catch(e){
    return '--'
  }
}
const handleSearch = async (query: string) => {
  console.log(query);
  if (!query.length) {
    mapList.value = [];
    return;
  }
  loading.value = true;
  const { data }: any = await dxget("public/map/geo", {
    address: query,
  });
  loading.value = false;
  console.log(data);
  mapList.value = data;
};
const slksrxe = (item, $event) => {
  item.callBack($event);
  // form.value.Locations = b.label
  // form.value.city = b.city
};

let columns = [
  {
    type: "selection",
    // options: ["all", "none"],
    width: 80,
    disabled(row, index) {
      // 新闻的弹窗
      if (props.portUrl.indexOf("dxleujne") > 0) {
        return (
          row.homepageRecommendation == 1 || row.homepageRecommendation == 2
        );
      }

      if (props.types == 0) {
        return row.state === 2 || row.state === 11;
      }
      if (props.types == 1) {
        // return row.state === 3;
      }
    },
  },
  ...zdcolumns,
];
if (!props.hidebj) {
  columns.push({
    title: "操作",
    align: "center",
    width: props.czWidth || "200",
    fixed: props.fixed ? "right" : props.fixed,
    render(row) {
      tableMore;
      if (props.MoreOperations) {
        const czLits = [];
        czBtn(row).map((a) => {
          if (a.__v_skip) {
            czLits.push({
              label: a.children,
              key: a.children,
              onClick: a.props.onClick,
            });
          } else {
            a.map((b) => {
              czLits.push({
                label: b.children,
                key: b.children,
                onClick: b.props.onClick,
              });
            });
          }
        });
        return h(tableMore, { OperationList: czLits });
      } else {
        return czBtn(row);
      }
    },
  });
}
const czBtn = (row: any) => {
  let arr = [];
  try {
    arr = localStorage.rolemanagement.split(",");
  } catch (e) {}
  const czBtn = [];
  if (
    arr.filter(
      (a) => a == props.qx.EditPermissionIdentifier[0] && !props.hidebj
    ) ||
    props.qx.EditPermissionIdentifier
  ) {
    if (props.qx.EditPermissionIdentifier != "23456") {
      czBtn.push(
        h(
          NButton,
          {
            type: "info",
            quaternary: true,
            onClick: () => {
              if (props.sonRouter) {
                hf(props.sonRouter, {
                  templateId: row.templateId,
                  templateTtpe: row.templateTtpe,
                  id: row.order_id || row.id,
                  type: 2,
                  ...props.extra,
                });
                return;
              }

              for (let key in row) {
                try {
                  if (row[key].split(",").length > 1) {
                    row[key] = row[key].split(",");
                  }
                  if (row.dlabel.split(",")) {
                    row.dlabel = row.dlabel.split(",");
                  }
                } catch (e) {}

                if (key == "dateManufacture" || key == "periodOfValidity") {
                  model.value[key] = new Date(row[key]).getTime();
                } else {
                  if (row[key]) {
                    model.value[key] = row[key];
                  }
                }
                if (key == "TakingTime") {
                  const jjhse = [];
                  row[key].map((a) => {
                    jjhse.push(parseInt(a));
                  });
                  model.value[key] = jjhse;
                }

                if (key == "district") {
                  initAddress();
                  districtChange(row.district);
                }
              }

              model.value = {
                ...model.value,
                ...props.extra,
              };

              showModal.value = true;
              redact.value = true;
              emit("bjfun", row);
            },
          },
          props.bjtext || "编辑"
        )
      );
    }
  }

  if (
    arr.filter((a) => (a == props.qx.DeletePermissionID)[0]) ||
    props.qx.DeletePermissionID == "123456"
  ) {
    if (props.qx.DeletePermissionID != "23456") {
      czBtn.push(
        h(
          NButton,
          {
            type: "error",
            class: "snahheert",
            vPermission: props.qx.DeletePermissionID,
            quaternary: true,
            onClick: async () => {
              emit("delfun", row.id);
              const is = await delUser(row.id);
            },
          },
          "删除"
        )
      );
    }
  }
  return [...czBtn, props.czFun.fun(row, loading)];
};

const noSideSpace = (value: string) => {
  return !value.startsWith(" ") && !value.endsWith(" ");
  // return !value.startsWith(' ') && !value.endsWith(' ')
};
const jjnmxert = (key) => {
  // data = data+'a'
  parameters[key] = parameters[key].trim();
};

const initData = async (type?, hid?) => {
  if (!hid) {
    show.value = true;
  }
  if (type == 2) {
    paginationReactive.page = 1;
    parameters.page = 1;
  }
  if (parameters.addTime) {
    try {
      parameters.addTime = parameters.addTime.join(",");
    } catch (e) {}
  }

  const jhbnse = JSON.parse(JSON.stringify(parameters));
  jhbnse.pageSize = paginationReactive.pageSize;
  try {
    if (jhbnse.scopeServices) {
      jhbnse.scopeServices = jhbnse.scopeServices.join(",");
    }
  } catch (e) {}
  loading.value = true;
  const { data }: any = await dxget(props.portUrl, jhbnse);
  show.value = false;
  tableData.value = data.data;
  loading.value = false;
  paginationReactive.pageCount = data.totalPages;
  emit("initDataCall", data.count);
  const ids = [];
  tableData.value.map((a) => {
    ids.push(a.id);
  });
  emit("getlistId", ids.join(","));
};
initData();

const getImg = (img) => {
  console.log(img);
  imgVal.value = img;
};
const setImg = () => {
  if (itemType.value == "imglist") {
    model.value[imgKey.value].push(imgVal.value);
  } else {
    model.value[imgKey.value] = imgVal.value;
  }

  photoShowModal.value = false;
};

const getImgvideo = (img) => {
  videoVal.value = img.url;
  videoDq.value = img;
};

const setImgvideo = () => {
  if (itemType.value == "videoList") {
    model.value[imgKey.value].push(videoVal.value);
  }else{
    model.value[imgKey.value] = videoVal.value;
  }



  photoShowModalvideo.value = false;
  try {
    model.value[dqitem.value.videoCover] = videoDq.value.imgurl;
  } catch (e) {}
};
const closesert = (idx, key) => {
  model.value[key].splice(idx, 1);
};
const kjnmse = (idx, type, key) => {
  if (!imgKey.value) {
    imgKey.value = key;
  }
  if (type == 1 && idx > 0) {
    [model.value[imgKey.value][idx - 1], model.value[imgKey.value][idx]] = [
      model.value[imgKey.value][idx],
      model.value[imgKey.value][idx - 1],
    ];
  }
  if (type == 2 && model.value[imgKey.value].length - 1 > idx) {
    [model.value[imgKey.value][idx + 1], model.value[imgKey.value][idx]] = [
      model.value[imgKey.value][idx],
      model.value[imgKey.value][idx + 1],
    ];
  }
};
const initForm = async () => {
  if (props.sonRouter) {
    hf(props.sonRouter, {
      ...props.extra,
    });
    return;
  }
  // 康盛的默认产品编码  ks2022070240001 格式

  const productCodeV = formJsonzj.value.filter((a) => a.key == "productCode");

  if (productCodeV.length > 0) {
    modelKeys["productCode"] = await kscpbm();
  }
  model.value = {
    id: "",
    street: "",
    ...modelKeys,
    ...props.extra,
  };

  try {
    for (let key in model.value) {
      if (isArray(model.value[key])) {
        model.value[key] = [];
      }
    }
  } catch (e) {}

  const addressArr = formJsonzj.value.filter((a) => a.type == "address");
  if (addressArr.length > 0) {
    initAddress();
  }
  showModal.value = true;
  redact.value = false;
};
const handleCheck = (data) => {
  const arrData = [];
  const arrDataObj = [];
  tableData.value.map((a) => {
    data.map((b) => {
      if (a.id == b) {
        arrData.push(b);
        arrDataObj.push(a);
      }
      // if (a.state > 0) {
      //   if (props.types == 0) {
      //     if (a.state == 1 && a.id == b) {
      //       arrData.push(b);
      //     }
      //   }
      //   if (props.types == 1) {
      //     if ((a.state == 2 || a.state == 3) && a.id == b) {
      //       arrData.push(b);
      //     }
      //   }
      //   if (props.types == 2) {
      //     if ((a.state == 15 && a.id == b) || (a.state == 8 && a.id == b)) {
      //       arrData.push(b);
      //     }
      //   }
      // } else {

      // }
    });
  });
  pitchOn.value = arrData;
  pitchOnobj.value = arrDataObj;
};
const addConfirm = async () => {
  if (props.bjtext == "详情") {
    showModal.value = false;
    return;
  }

  let urles = props.portUrl;
  if (props.addurl && !redact.value) {
    urles = props.addurl;
  }
  formRef.value.reset;
  formRef.value.validate(async (errors) => {
    // xkfdsfsdty.value.getContent()
    if (!errors) {
      formLoad.value = true;
      let { errno, data }: any = await dxpost(
        urles,
        model.value,
        redact.value ? "PUT" : "POST"
      );
      formLoad.value = false;
      if (errno == 0) {
        if (!props.ispiliang) {
          window.$message.success("操作成功！");
        }

        showModal.value = false;
        redact.value = false;
        initData();
        if (!redact.value) {
          emit("addFromback", data.insertId);
        }
      }
    } else {
    }
  });
};
const tijisosd = async () => {
  let urles = props.portUrl;
  if (props.addurl && !redact.value) {
    urles = props.addurl;
  }
  formLoad.value = true;
  let { errno, data }: any = await dxpost(
    urles,
    model.value,
    redact.value ? "PUT" : "POST"
  );
  formLoad.value = false;
  if (errno == 0) {
    if (!props.ispiliang) {
      window.$message.success("操作成功！");
    }

    showModal.value = false;
    redact.value = false;
    initData();
    if (!redact.value) {
      emit("addFromback", data.insertId);
    }
  }
};
const kxczxtrtywe = async () => {
  //  let jcxr = model.value.plateNumber
  for (let i = 0; i < kmmxsr.value; i++) {
    // model.value.plateNumber = jcxr+i
    await tijisosd();
  }
  window.$message.success("操作成功！");
};

const delUser = (id) => {
  return new Promise(async (resolve) => {
    let statics: any = await dialog("此操作将永久删除, 是否继续?");
    if (statics == 1) {
      if (props.delurl) {
        await dxpost(props.delurl, {
          id: id,
        });
        resolve(true);
        initData();
      } else {
        let { errno }: any = await dxdel(props.portUrl, {
          id: id,
        });
        if (errno == 0) {
          resolve(true);
          initData();
        }
      }
    }
  });
};
const topDel = async () => {
  const res = await delUser(pitchOn.value.join(","));
  if (res) {
    pitchOn.value = [];
  }
};
const handlePageChange = (page) => {
  paginationReactive.page = page;
  parameters.page = page;

  initData();
};
// 获取省市区
const getssqAddress = async (obj?) => {
  let { data }: any = await dxget("public/area", obj);
  shenList.value = data;
  return data;
};
getssqAddress();
const changegetssqAddress = async (obj, bsd) => {
  let { data }: any = await dxget("public/area", {
    type: 1,
    code: bsd.value,
  });
  shiList.value = data;
  model.value["shi"] = "";
};

const initAddress = async () => {
  districtceList.value = quyu;
};
const districtChange = async (data) => {
  model.value.street = null;
  streetList.value = quyu.filter((a) => a.value == data)[0].xiaji;
};

defineExpose({
  // 获取表格选中的id
  getpitchOn() {
    return pitchOn.value;
  },
  // 初始化表格
  initDataExpose() {
    pitchOn.value = [];
    initData(0, true);
  },
  jiedaoNull() {
    parameters.street = null;
  },
  tableload(da) {
    loading.value = da;
  },
  // 弹窗设置val  如两个下拉框关联   callback
  setmodel(key, data) {
    model.value[key] = data;
  },
  xinhasr() {
    initForm();
  },
});

const uploadxl = async (data) => {
  const urlese = props.portUrl.split("/");
  let dataName = urlese[urlese.length - 1];
  if (dataName.indexOf("?") >= 0) {
    dataName = dataName.split("?")[0];
  }

  const res = await readExcel(
    data.file.file,
    props.formJson,
    dataName,
    {
      parentLevel: cz.id,
    },
    props.drerrtext,
    props.sjname,
    props.ewcsobj
  );
  if (res) {
    pitchOn.value = [];
    initData();
  }
};

const handleLoad = async (data) => {
  const res: any = await dxget("public/area", {
    type: 1,
    code: data.value,
  });
  data.children = res.data;
};
const czbdfun = () => {
  for (let key in parameters) {
    parameters[key] = null;
  }
  parameters.page = 1;
  initData(2);
};

const getImgs = async ($event, keys) => {
  const responseText = JSON.parse($event.event.currentTarget.responseText);
  console.log(responseText.data.imgurl.split("?")[0]);
  model.value[keys] = responseText.data.imgurl.split("?")[0];
  appload.value = false;
  window.$message.success("上传成功");
};
</script>
<style scoped>
.kjjjmsertwe {
  grid-template-columns: repeat(5, 1fr);
}

.kjjjsertwwx {
  height: 100px;
}

.fxfgfretxcrw {
  overflow: auto;
  max-height: 250px;
}

.kcxzcdsrtftrec {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}
</style>
